<template>
	<view class="flex-col h100">
		<view class="">
			<u-navbar title="待办事项" :placeholder="true" leftIconColor="#fff" titleStyle="color: #fff" bgColor="#2172FC"
				:autoBack="true">
				<template #right>
					<u-icon name="hourglass" color="#fff" size="25" @click="openPopup"></u-icon>
				</template>
			</u-navbar>
		</view>
		<view class="p-10">
			<template v-if="list.length > 0">
				<view class="card" v-for="(item,index) in list" :index="index" @click="goDetail(item)">
					<view class="title fw">
						{{item.title}}
					</view>
					<view class="flex m-between s-center">
						<view class="flex-col">
							<text class="m-t-8">{{item.startUserName}}在{{item.createTime}}发起{{item.procDefName}}</text>
						</view>
						<!-- <view class="bnt" @click="goDetail(item)">
							<up-text type="primary" text="办理"></up-text>
						</view> -->
					</view>
				</view>
			</template>
			<u-empty v-else mode="data">
			</u-empty>
		</view>
	</view>
	<!-- 筛选popup -->
	<u-popup :show="showPopup" class="my-popup" :closeOnClickOverlay="true" mode="right" @close="closePopup">
		<view class="p-20">
			<my-forms ref="dynamicForm" :model="queryParams" :formItem="formData"></my-forms>
			<view class="flex m-between">
				<button type="error" size="mini" @click="reset">重置</button>
				<button type="primary" size="mini" @click="submit">确定</button>
			</view>
		</view>
	</u-popup>
	<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
</template>
<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		onShow,
	} from '@dcloudio/uni-app'
	import useList from '@/hooks/useList.js'
	import {
		gettaskList
	} from '@/api/flowPath.js'
	let dynamicForm = ref(null),
		queryParams = reactive({
			pageNum: 1,
			pageSize: 10,
		}),
		formData = ref([{
			label: '作业标题',
			prop: 'title'
		}])
	const {
		getListData,
		list,
		scrollTop,
		showPopup,
		openPopup,
		closePopup,
		submit,
		reset
	} = useList({
		queryParams,
		api: {
			page: gettaskList
		}
	})
	const goDetail = (item) => {
		uni.navigateTo({
			url: '/pages/professional/riskOperations/todoList/detail?procInsId=' + JSON.stringify(item
				.procInsId) + '&taskId=' + JSON.stringify(item.taskId) + '&deployId=' + JSON.stringify(item
				.deployId)
		})
	}
	onShow(() => {
		getListData()
	})
</script>
<style lang="scss" scoped>
	.card {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;

		&:first-child {
			margin-top: 0;
		}
	}

	.bnt {
		width: 100rpx;
	}
</style>